<template>
  <div id="oldNewsMore">
    <van-nav-bar title="养老资讯" left-arrow @click-left="onClickLeft" fixed />
    <div class="news-content">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="news-content"
      >
        <van-pull-refresh 
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh">
          <van-cell v-for="item in newsList" :key="item.id" @click="viewMore(item.id)">
            <div class="list-style">
              <div v-if="item.headImage">
                <img v-lazy="item.headImage" :key="item.headImage" />
              </div>
              <div v-else class="no-images">
              </div>
              <div style class="text-style">
                <p class="title">{{item.subject}}</p>
                <p class="date">{{item.creation}}</p>
              </div>
            </div>
          </van-cell>
        </van-pull-refresh>
      </van-list>
    </div>
  </div>
</template>
<script>
import api from "@/controller/agedService.js";
import constant from "@/controller/constant.js";
export default {
  name: "oldNewsMore",
  data() {
    return {
      finished: false,
      loading: false,
      isLoading: false,
      curPage: 1,
      pageSize: 10,
      newsList: []
    };
  },
  mounted() {
    this.getMoreNews()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 点击查看更多跳转页面
    viewMore(val) {
      this.$router.push({ path: "/work/oldNewsViewMore", query: {id: val} });
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
        this.curPage += 1;
        this.getMoreNews();
      }, 500);
    },
    onLoad() {
      this.loading = true;
      this.onRefresh()
    },
    // 获取养老资讯列表
    getMoreNews() {
      const data = {
        curPage: this.curPage,
        pageSize: this.pageSize
      };
      api
        .pensionInformation_v1_list_frontEnd(data)
        .then(res => {
          if(res.code == "0") {
            if(
              (res.datas && res.datas.records.length === 0) ||
                res.datas === null
            ) {
              // this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return
            }
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            })
            this.newsList = [...this.newsList, ...res.datas.records];
            if(res.datas.records.length < this.pageSize) {
              this.finished = true
            }
          }
        })
        .catch(() => {
          this.$toast(constant.netErrMs);
        })
    }
  }
};
</script>
<style lang="scss">
#oldNewsMore {
  height: 100%;
  background: white;
  .van-cell {
    padding: 14.75px 0;
    margin: 0 auto;
    width: 345px;
    border-bottom: 0.5px solid #e2e2e2;
    line-height: 0;
    .list-style {
      div {
        display: inline-block;
      }
    }
    img {
      width: 60px;
      height: 60px;
    }
    .no-images {
      display: inline-block;
      width: 60px;
      height: 60px;
    }
    .text-style {
      width: 266px;
      margin-left: 12px;
      vertical-align: top;
      display: inline-block;
      .title {
        height: 40px;
        width: 266px;
        line-height: 20px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
      }
      .date {
        width: 266px;
        margin-top: 7.5px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0;
        line-height: 16.5px;
      }
    }
  }
  .van-cell:not(:last-child)::after {
    border: none !important;
  }
}
</style>